<template>
<!-- 回收站页面 -->
  <div class="recucleprodeuct">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>产品管理</el-breadcrumb-item>
      <el-breadcrumb-item>回收站产品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="conter">
        <!-- 条件搜索 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input
              placeholder="请输入需要查询的内容"
              v-model="searchall"
              clearable
              @clear="clearsearch()"
            >
              <template slot="prepend">按全部查询：</template>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="allSearch()"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="10">
            <el-input
              placeholder="请输入需要查询的书名"
              v-model="search"
              clearable
              @clear="clearsearch()"
            >
              <template slot="prepend">按书名查询：</template>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="handleSearch()"
              ></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input
              placeholder="请输入需要查询的作者"
              v-model="search1"
              clearable
              @clear="clearsearch()"
            >
              <template slot="prepend">按作者查询：</template>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="authorSearch()"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="10">
            <el-input
              placeholder="请输入需要查询的出版社"
              v-model="search2"
              clearable
              @clear="clearsearch()"
            >
              <template slot="prepend">按出版社查：</template>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="pressSearch()"
              ></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-table :data="tableData1" border stripe>
          <el-table-column
            type="index"
            :index="indexNum"
            label="序号"
            width="40"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="booknumber"
            label="图书编号"
            width="60"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="bookname"
            label="图书名称"
            width=""
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scpoe">
              <span>{{ scpoe.row.bookname }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="booktype_id"
            label="图书分类"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="author"
            label="图书作者"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column prop="press" label="出版社" width="" align="center">
          </el-table-column>
          <el-table-column prop="image" label="封面图" width="" align="center">
            <template slot-scope="scope">
              <img :src="api + scope.row.image" min-width="80" height="80" />
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            label="简介"
            width=""
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row.content }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="原价" width="" align="center">
          </el-table-column>
          <el-table-column prop="vipprice" label="现价" width="" align="center">
          </el-table-column>
          <el-table-column prop="freight" label="运费" width="" align="center">
          </el-table-column>
          <el-table-column prop="number" label="数量" width="" align="center">
          </el-table-column>
          <el-table-column
            prop="oldnewdegree"
            label="新旧度"
            width=""
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="Restorsoftdeletebooks(scope.row.id)"
                >恢复图书</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="PermanentlyDeletebooks(scope.row.id)"
                >永久删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @next-click="handleNextClick"
          @prev-click="handlePrevClick"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="5"
          :current-page="currentpage"
          background
          layout="total,sizes, prev, pager, next, jumper"
          :total="tableData_length"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      search: "", //书名查询
      search1: "", //作者查询
      search2: "", //编号查询
      searchall: "", //全部查询
      currentpage: 1, //当前页面
      tableData1: [], //每页显示条目
      tableData_length: 0, //总条目数
      pageSize: 5,
      api: this.imageapi,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //请求后端数据
    init() {
      const that = this;
      this.$http
        .get("/showsoftdeletebooks")
        .then(res => {
          // console.log(res);
          that.tableData = res.data;
          that.tableData = res.data;
          that.tableData_length = res.data.length;
          this.handleCurrentChange(1); //默认显示第一页条目
          for (let i in that.tableData) {
            if (that.tableData[i].sheif == 1) {
              that.tableData[i].sheif = true;
            } else {
              that.tableData[i].sheif = false;
            }
          }
        })
        .catch(function() {
          alert("请求数据失败...");
        });
    },
    //element table自带序号
    indexNum(index) {
       return (this.currentpage - 1) * this.pageSize + index + 1;
    },
    // 恢复数据
    Restorsoftdeletebooks(id) {
      const that = this;
      that.$http
        .post("/restorsoftdeletebooks", { id })
        .then(() => {
          // console.log(res);
          that.init();
        })
        .catch(function() {});
    },
    //永久删除数据
    PermanentlyDeletebooks(id) {
      const that = this;
      that
        .$confirm("此操作将数据永久删除,不可恢复, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        })
        .then(() => {
          that.$http.post("/permanentlydeletebooks", { id }),
            that.$message({
              type: "success",
              message: "删除成功!"
            });
          for (let i in that.tableData1) {
            if (that.tableData1[i].id == id) {
              that.tableData1.splice(i, 1); //删除不请求数据，直接在数组中删除
              break;
            }
          }
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //处理数据,分页
    handleTableData() {
      this.tableData1 = this.tableData.slice(
        (this.currentpage - 1) * this.pageSize,
        this.currentpage * this.pageSize
      );
    },
    // 每页显示多少条
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleTableData();
    },
    //点击中间页的按钮 执行的方法
    handleCurrentChange(val) {
      this.oldPage = val;
      this.currentpage = val;
      this.handleTableData();
    },
    //点击向前的按钮 执行的方法
    handlePrevClick(val) {
      this.oldPage = val;
      this.currentpage = val;
      this.handleTableData();
    },
    //点击向后的按钮 执行的方法
    handleNextClick(val) {
      this.oldPage = val;
      this.currentpage = val;
      this.handleTableData();
    },
    // 按照书名搜索
    handleSearch() {
      if (this.search == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      } else {
        let search = this.search;
        this.tableData = this.tableData.filter(item => {
          let searchField = { bookname: item.bookname };
          return Object.keys(searchField).some(key => {
            return (
              String(item[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
      }
      this.tableData_length = this.tableData.length;
      this.handleCurrentChange(1);
    },
    // 按照图书作者搜索
    authorSearch() {
      if (this.search1 == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      } else {
        let search = this.search1;
        this.tableData = this.tableData.filter(item => {
          let searchField = { author: item.author };
          return Object.keys(searchField).some(key => {
            return (
              String(item[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
      }
      this.tableData_length = this.tableData.length;
      this.handleCurrentChange(1);
    },
    // 按照图书作者搜索
    pressSearch() {
      if (this.search2 == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      } else {
        let search = this.search2;
        this.tableData = this.tableData.filter(item => {
          let searchField = { press: item.press };
          return Object.keys(searchField).some(key => {
            return (
              String(item[key])
                .toLowerCase()
                .indexOf(search) > -1
            );
          });
        });
      }
      this.tableData_length = this.tableData.length;
      this.handleCurrentChange(1);
    },
    // 按全部查询
    allSearch() {
      if (this.searchall == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      } else if (this.searchall) {
        this.tableData = this.tableData.filter(item => {
          let res = JSON.stringify(item);
          if (res.indexOf(this.searchall) != -1) {
            return true;
          } else {
            return false;
          }
        });
      } else {
        this.tableData2 = this.tableData;
      }
      this.tableData_length = this.tableData.length;
      this.handleCurrentChange(1);
    },
    // 清除查询框 调用分页函数
    clearsearch() {
      this.init();
    }
  }
};
</script>

<style scoped>
.el-row{
  margin: 10px auto;
}
</style>